Performance Timeline: Kattava opas mittareiden keräämiseen

Nykypäivän nopeatempoisessa digitaalisessa maailmassa verkkosivuston suorituskyky on ensiarvoisen tärkeää. Käyttäjät odottavat sivustojen latautuvan nopeasti ja reagoivan välittömästi. Hidas verkkosivusto voi johtaa turhautumiseen, keskeytettyihin istuntoihin ja lopulta menetettyihin tuloihin. Onneksi nykyaikaiset selaimet tarjoavat tehokkaita työkaluja verkkosivuston suorituskyvyn mittaamiseen ja analysointiin. Yksi arvokkaimmista näistä työkaluista on Performance Timeline API.

Tämä kattava opas tutkii Performance Timeline API:a yksityiskohtaisesti, kattaen kaiken sen peruskäsitteistä edistyneisiin tekniikoihin suorituskykymittareiden keräämiseksi ja analysoimiseksi. Syvennymme erilaisiin suorituskykymerkintöjen tyyppeihin, osoitamme, kuinka API:a käytetään tehokkaasti, ja tarjoamme käytännön esimerkkejä auttaaksemme sinua optimoimaan verkkosivustosi suorituskykyä.

Mikä on Performance Timeline API?

Performance Timeline API on joukko JavaScript-rajapintoja, jotka tarjoavat pääsyn selaimen keräämiin suorituskykyyn liittyviin tietoihin. Se antaa kehittäjille mahdollisuuden mitata verkkosivuston suorituskyvyn eri osa-alueita, kuten:

• Sivun latausaika
• Resurssien latausaika (kuvat, skriptit, tyylitiedostot)
• Käyttäjän ajoitusmittaukset
• Kuvataajuus ja renderöintisuorituskyky
• Muistin käyttö

Keräämällä ja analysoimalla tätä dataa kehittäjät voivat tunnistaa suorituskyvyn pullonkauloja ja toteuttaa optimointeja käyttökokemuksen parantamiseksi. API tarjoaa standardoidun tavan päästä käsiksi suorituskykytietoihin, mikä helpottaa selainten välisten suorituskyvyn seurantatyökalujen rakentamista.

Keskeiset käsitteet ja rajapinnat

Performance Timeline API pyörii muutaman keskeisen käsitteen ja rajapinnan ympärillä:

• Performance Timeline: Edustaa suorituskykytapahtumien aikajanaa, jotka ovat tapahtuneet verkkosivun elinkaaren aikana. Se on keskeinen piste suorituskykytietojen käyttämiseen.
• Performance Entry: Edustaa yhtä suorituskykytapahtumaa, kuten resurssin lataustapahtumaa tai käyttäjän määrittelemää ajoitusmittausta.
• Performance Observer: Mahdollistaa kehittäjien seurata Performance Timelinea uusien suorituskykymerkintöjen varalta ja reagoida niihin reaaliajassa.
• `performance`-objekti: Globaali objekti (`window.performance`), joka tarjoaa pääsyn Performance Timelineen ja siihen liittyviin metodeihin.

`performance`-objekti

`performance`-objekti on lähtökohta Performance Timeline API:n kanssa toimimiseen. Se tarjoaa metodeja suorituskykymerkintöjen hakemiseen, aikajanan tyhjentämiseen ja suorituskyvyn tarkkailijoiden luomiseen. Jotkut yleisimmin käytetyistä metodeista ovat:

• `performance.getEntries()`: Palauttaa taulukon kaikista suorituskykymerkinnöistä aikajanalla.
• `performance.getEntriesByName(name, entryType)`: Palauttaa taulukon suorituskykymerkinnöistä, joilla on tietty nimi ja merkintätyyppi.
• `performance.getEntriesByType(entryType)`: Palauttaa taulukon tietyn tyyppisistä suorituskykymerkinnöistä.
• `performance.clearMarks(markName)`: Poistaa suorituskykymerkit, joilla on tietty nimi.
• `performance.clearMeasures(measureName)`: Poistaa suorituskykymittaukset, joilla on tietty nimi.
• `performance.now()`: Palauttaa korkean resoluution aikaleiman, tyypillisesti millisekunneissa, joka edustaa navigoinnin alusta kulunutta aikaa. Tämä on ratkaisevan tärkeää kestojen mittaamisessa.

Suorituskykymerkintöjen tyypit

Performance Timeline API määrittelee useita erilaisia suorituskykymerkintöjen tyyppejä, joista kukin edustaa tietyn tyyppistä suorituskykytapahtumaa. Tärkeimpiä merkintätyyppejä ovat:

• `navigation`: Edustaa sivun latauksen navigointiajoitusta, mukaan lukien DNS-haku, TCP-yhteys, pyyntö- ja vastausajat.
• `resource`: Edustaa tietyn resurssin, kuten kuvan, skriptin tai tyylitiedoston, lataamista.
• `mark`: Edustaa käyttäjän määrittelemää aikaleimaa aikajanalla.
• `measure`: Edustaa käyttäjän määrittelemää kestoa aikajanalla, laskettuna kahden merkin välillä.
• `paint`: Edustaa aikaa, joka selaimelta kuluu ensimmäisen sisällön (First Paint) ja ensimmäisen merkityksellisen sisällön (First Contentful Paint) piirtämiseen näytölle.
• `longtask`: Edustaa tehtäviä, jotka estävät pääsäiettä pitkäksi aikaa (tyypillisesti yli 50 ms), mikä voi aiheuttaa käyttöliittymän nykimistä.
• `event`: Edustaa selaimen tapahtumaa, kuten hiiren napsautusta tai näppäimen painallusta.
• `layout-shift`: Edustaa odottamattomia muutoksia sivun asettelussa, jotka voivat häiritä käyttökokemusta (Cumulative Layout Shift).
• `largest-contentful-paint`: Edustaa aikaa, joka kuluu näkymäalueen suurimman sisältöelementin näkyviin tulemiseen.

Suorituskykymittareiden kerääminen

Suorituskykymittareita voi kerätä Performance Timeline API:n avulla useilla tavoilla. Yleisimpiä lähestymistapoja ovat:

• Merkintöjen noutaminen suoraan aikajanalta: Käyttämällä `performance.getEntries()`, `performance.getEntriesByName()` tai `performance.getEntriesByType()` tiettyjen suorituskykymerkintöjen noutamiseen.
• Performance Observerin käyttäminen: Aikajanan seuraaminen uusien merkintöjen varalta ja niihin reagoiminen reaaliajassa.

Merkintöjen noutaminen suoraan

Yksinkertaisin tapa kerätä suorituskykymittareita on noutaa merkinnät suoraan aikajanalta. Tämä on hyödyllistä datan keräämiseen tietyn tapahtuman jälkeen, kuten sivun latauduttua tai käyttäjän vuorovaikutettua tietyn elementin kanssa.

Tässä on esimerkki siitä, kuinka kaikki resurssimerkinnät noudetaan aikajanalta:

            
const resourceEntries = performance.getEntriesByType("resource");

resourceEntries.forEach(entry => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
});

            

              
                Copy
              
            
          

Tämä koodi hakee kaikki "resource"-tyyppiset merkinnät ja kirjaa jokaisen resurssin nimen ja keston konsoliin.

Performance Observerin käyttäminen

Performance Observerin avulla voit seurata Performance Timelinea uusien suorituskykymerkintöjen varalta ja reagoida niihin reaaliajassa. Tämä on erityisen hyödyllistä datan keräämiseen heti sen tullessa saataville, ilman että aikajanaa tarvitsee jatkuvasti kysellä.

Tässä on esimerkki siitä, kuinka Performance Observeria käytetään uusien resurssimerkintöjen seuraamiseen:

            
const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach(entry => {
 console.log(`Resource loaded: ${entry.name}, duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

Tämä koodi luo Performance Observerin, joka kuuntelee uusia "resource"-tyyppisiä merkintöjä. Kun uusi resurssimerkintä lisätään aikajanalle, tarkkailijan takaisinkutsufunktio suoritetaan, ja se kirjaa resurssin nimen ja keston konsoliin. `observer.observe()`-metodi määrittää, mitä merkintätyyppejä tarkkailijan tulee seurata.

Käyttäjän ajoitusten mittaaminen

Performance Timeline API mahdollistaa myös omien mukautettujen suorituskykymittareiden määrittämisen käyttämällä `mark`- ja `measure`-merkintätyyppejä. Tämä on hyödyllistä mitattaessa aikaa, joka kuluu sovelluksesi tiettyjen osien suorittamiseen, kuten komponentin renderöintiin tai käyttäjän syötteen käsittelyyn.

Mitataksesi käyttäjän ajoitusta, luot ensin `mark`-merkinnän merkitsemään mitattavan osion alun ja lopun. Sitten luot `measure`-merkinnän laskemaan keston näiden kahden merkin välillä.

Tässä on esimerkki siitä, kuinka mitata komponentin renderöintiin kuluva aika:

            
performance.mark("component-render-start");

// Code to render the component

performance.mark("component-render-end");

performance.measure("component-render-time", "component-render-start", "component-render-end");

const measure = performance.getEntriesByName("component-render-time", "measure")[0];

console.log(`Component render time: ${measure.duration}ms`);

            

              
                Copy
              
            
          

Tämä koodi luo kaksi merkkiä, `component-render-start` ja `component-render-end`, ennen ja jälkeen komponentin renderöivän koodin. Sitten se luo mittauksen nimeltä `component-render-time` laskemaan keston näiden kahden merkin välillä. Lopuksi se hakee mittausmerkinnän aikajanalta ja kirjaa keston konsoliin.

Suorituskykymittareiden analysointi

Kun olet kerännyt suorituskykymittareita, sinun on analysoitava ne tunnistaaksesi suorituskyvyn pullonkaulat ja toteuttaaksesi optimointeja. Tähän tarkoitukseen voit käyttää useita työkaluja ja tekniikoita:

• Selaimen kehittäjätyökalut: Useimmat nykyaikaiset selaimet tarjoavat sisäänrakennettuja kehittäjätyökaluja, joiden avulla voit visualisoida ja analysoida suorituskykydataa. Nämä työkalut sisältävät tyypillisesti Suorituskyky-paneelin, joka näyttää suorituskykytapahtumien aikajanan, sekä työkaluja JavaScript-koodin profilointiin ja muistin käytön analysointiin.
• Suorituskyvyn seurantatyökalut: On olemassa monia kolmannen osapuolen suorituskyvyn seurantatyökaluja, jotka voivat auttaa sinua keräämään, analysoimaan ja visualisoimaan suorituskykydataa. Nämä työkalut tarjoavat usein edistyneitä ominaisuuksia, kuten reaaliaikaista seurantaa, poikkeamien havaitsemista ja automaattista raportointia. Esimerkkejä ovat New Relic, Datadog ja Sentry.
• Web Vitals: Googlen Web Vitals -aloite tarjoaa joukon mittareita, joita pidetään olennaisina käyttökokemuksen mittaamisessa. Näihin mittareihin kuuluvat Largest Contentful Paint (LCP), First Input Delay (FID) ja Cumulative Layout Shift (CLS). Näiden mittareiden seuranta auttaa tunnistamaan ja korjaamaan yleisiä suorituskykyongelmia.

Selaimen kehittäjätyökalujen käyttäminen

Selaimen kehittäjätyökalut ovat tehokas ja helposti saatavilla oleva resurssi suorituskyvyn analysointiin. Näin voit käyttää Chrome Developer Toolsin Suorituskyky-paneelia (muilla selaimilla on vastaavia toimintoja):

1. Avaa kehittäjätyökalut: Napsauta hiiren kakkospainikkeella verkkosivua ja valitse "Inspect" (Tarkastele) tai paina F12.
2. Siirry Suorituskyky-paneeliin: Napsauta "Performance" (Suorituskyky) -välilehteä.
3. Aloita tallennus: Napsauta tallennuspainiketta (yleensä ympyrä) aloittaaksesi suorituskykytietojen keräämisen.
4. Ole vuorovaikutuksessa sivun kanssa: Suorita toiminnot, joita haluat analysoida, kuten sivun lataaminen, painikkeiden napsauttaminen tai vierittäminen.
5. Lopeta tallennus: Napsauta pysäytyspainiketta lopettaaksesi tallennuksen.
6. Analysoi aikajana: Suorituskyky-paneeli näyttää suorituskykytapahtumien aikajanan, mukaan lukien latausajat, JavaScriptin suoritus, renderöinti ja piirtäminen.

Aikajana tarjoaa yksityiskohtaista tietoa jokaisesta tapahtumasta, mukaan lukien sen kesto, alkamisaika ja suhde muihin tapahtumiin. Voit lähentää ja loitontaa, suodattaa tapahtumia tyypin mukaan ja tarkastella yksittäisiä tapahtumia saadaksesi lisätietoja. "Bottom-Up"-, "Call Tree"- ja "Event Log" -välilehdet tarjoavat erilaisia näkökulmia dataan, mikä auttaa sinua tunnistamaan suorituskyvyn pullonkauloja ja optimoimaan koodiasi.

Web Vitals: Käyttökokemuksen mittaaminen

Web Vitals on Googlen määrittelemä joukko mittareita, joilla mitataan käyttökokemusta verkkosivustolla. Näihin mittareihin keskittyminen voi parantaa merkittävästi käyttäjätyytyväisyyttä ja SEO-sijoitusta.

• Largest Contentful Paint (LCP): Mittaa aikaa, joka kuluu näkymäalueen suurimman sisältöelementin näkyviin tulemiseen. Hyvä LCP-arvo on 2,5 sekuntia tai vähemmän.
• First Input Delay (FID): Mittaa aikaa, joka selaimelta kuluu vastata ensimmäiseen käyttäjän vuorovaikutukseen (esim. painikkeen napsautus tai linkin napautus). Hyvä FID-arvo on 100 millisekuntia tai vähemmän.
• Cumulative Layout Shift (CLS): Mittaa odottamattomien asettelumuutosten määrää sivulla. Hyvä CLS-arvo on 0,1 tai vähemmän.

Voit mitata Web Vitals -arvoja useilla työkaluilla, kuten:

• Chrome User Experience Report (CrUX): Tarjoaa todellista suorituskykydataa verkkosivustoista perustuen anonymisoituun Chrome-käyttäjädataan.
• Lighthouse: Automaattinen työkalu, joka tarkastaa verkkosivujen suorituskyvyn, saavutettavuuden ja SEO:n.
• Web Vitals Extension: Chrome-laajennus, joka näyttää Web Vitals -mittareita reaaliajassa selatessasi verkkoa.
• PerformanceObserver API: Sieppaa web vitals -dataa suoraan selaimesta tapahtumien sattuessa.

Käytännön esimerkkejä ja käyttötapauksia

Tässä on joitain käytännön esimerkkejä ja käyttötapauksia siitä, kuinka voit käyttää Performance Timeline API:a verkkosivustosi suorituskyvyn optimoimiseksi:

• Hitaasti latautuvien resurssien tunnistaminen: Käytä `resource`-merkintätyyppiä tunnistaaksesi kuvat, skriptit ja tyylitiedostot, joiden latautuminen kestää kauan. Optimoi nämä resurssit pakkaamalla ne, käyttämällä sisällönjakeluverkkoa (CDN) tai lataamalla ne laiskasti. Esimerkiksi monet verkkokauppa-alustat, kuten Shopify, Magento tai WooCommerce, luottavat kuviin tuotteiden myynnissä. Kuvatiedostojen latauksen optimointi suorituskyvyn aikajanadatan avulla parantaa asiakaskokemusta, erityisesti mobiilikäyttäjillä.
• JavaScriptin suoritusajan mittaaminen: Käytä `mark`- ja `measure`-merkintätyyppejä mitataksesi aikaa, joka kuluu tiettyjen JavaScript-funktioiden suorittamiseen. Tunnista hitaasti toimivat funktiot ja optimoi ne käyttämällä tehokkaampia algoritmeja, välimuistittamalla tuloksia tai siirtämällä suoritusta myöhemmäksi.
• Pitkien tehtävien havaitseminen: Käytä `longtask`-merkintätyyppiä tunnistaaksesi tehtävät, jotka estävät pääsäiettä pitkäksi aikaa. Pilko nämä tehtävät pienempiin osiin tai siirrä ne taustasäikeeseen estääksesi käyttöliittymän nykimisen.
• First Contentful Paint (FCP) ja Largest Contentful Paint (LCP) -arvojen seuranta: Käytä `paint`- ja `largest-contentful-paint`-merkintätyyppejä seurataksesi aikaa, joka kuluu ensimmäisen sisällön ja suurimman sisällön ilmestymiseen näytölle. Optimoi kriittinen renderöintipolku parantaaksesi näitä mittareita.
• Cumulative Layout Shift (CLS) -arvon analysointi: Käytä `layout-shift`-merkintätyyppiä tunnistaaksesi elementit, jotka aiheuttavat odottamattomia asettelumuutoksia. Varaa tilaa näille elementeille tai käytä `transform`-ominaisuutta niiden animoimiseen aiheuttamatta asettelumuutoksia.

Edistyneet tekniikat

Kun sinulla on vankka perusymmärrys Performance Timeline API:sta, voit tutkia joitain edistyneitä tekniikoita verkkosivustosi suorituskyvyn optimoimiseksi entisestään:

• Todellisten käyttäjien valvonta (RUM): Kerää suorituskykydataa oikeilta käyttäjiltä kentällä saadaksesi tarkemman kuvan verkkosivustosi suorituskyvystä. Käytä RUM-työkalua tai toteuta oma räätälöity RUM-ratkaisusi Performance Timeline API:n avulla. Tätä dataa voidaan sitten käyttää alueellisten suorituskykyerojen määrittämiseen. Esimerkiksi Yhdysvalloissa isännöity verkkosivusto saattaa kokea hitaampia latausaikoja Aasiassa verkon viiveen vuoksi.
• Synteettinen valvonta: Käytä synteettistä valvontaa simuloidaksesi käyttäjän vuorovaikutuksia ja mitataksesi suorituskykyä kontrolloidussa ympäristössä. Tämä voi auttaa sinua tunnistamaan suorituskykyongelmia ennen kuin ne vaikuttavat oikeisiin käyttäjiin.
• Automatisoitu suorituskykytestaus: Integroi suorituskykytestaus jatkuvan integraation/jatkuvan toimituksen (CI/CD) putkeesi havaitaksesi suorituskyvyn heikkenemiset automaattisesti. Työkalut, kuten Lighthouse CI, voidaan käyttää tämän prosessin automatisointiin.
• Suorituskykybudjetointi: Aseta suorituskykybudjetit keskeisille mittareille, kuten sivun latausajalle, resurssien koolle ja JavaScriptin suoritusajalle. Käytä automaattisia työkaluja näiden budjettien valvontaan ja hälyttämään, kun ne ylittyvät.

Selainten välinen yhteensopivuus

Performance Timeline API on laajalti tuettu nykyaikaisissa selaimissa, mukaan lukien Chrome, Firefox, Safari ja Edge. API:n toteutuksessa ja toiminnassa voi kuitenkin olla joitain eroja eri selaimissa.

Varmistaaksesi selainten välisen yhteensopivuuden on tärkeää testata koodisi eri selaimissa ja käyttää ominaisuuksien tunnistusta toiminnallisuuden hallittuun heikentämiseen, jos API:a ei tueta. Kirjastot, kuten `modernizr`, voivat auttaa ominaisuuksien tunnistamisessa.

Parhaat käytännöt

Tässä on joitain parhaita käytäntöjä Performance Timeline API:n käyttämiseen:

• Käytä Performance Observerseja reaaliaikaiseen seurantaan: Performance Observerit tarjoavat tehokkaamman tavan kerätä suorituskykydataa kuin aikajanan toistuva kyseleminen.
• Ota huomioon suorituskykytietojen keräämisen vaikutus suorituskykyyn: Liian suuren datamäärän kerääminen voi vaikuttaa negatiivisesti verkkosivustosi suorituskykyyn. Kerää vain tarvitsemasi data ja vältä raskaiden operaatioiden suorittamista Performance Observerin takaisinkutsufunktiossa.
• Käytä merkityksellisiä nimiä merkeille ja mittauksille: Tämä helpottaa datan analysointia ja suorituskyvyn pullonkaulojen tunnistamista.
• Testaa koodisi eri selaimissa: Varmista selainten välinen yhteensopivuus testaamalla koodisi eri selaimissa ja käyttämällä ominaisuuksien tunnistusta.
• Yhdistä muihin optimointitekniikoihin: Performance Timeline API auttaa mittaamaan ja tunnistamaan ongelmia. Käytä sitä yhdessä vakiintuneiden verkon optimoinnin parhaiden käytäntöjen (kuvien optimointi, minifikointi, CDN-käyttö) kanssa kokonaisvaltaisten suorituskykyparannusten saavuttamiseksi.

Yhteenveto

Performance Timeline API on tehokas työkalu verkkosivuston suorituskyvyn mittaamiseen ja analysointiin. Ymmärtämällä API:n keskeiset käsitteet ja rajapinnat voit kerätä arvokkaita suorituskykymittareita ja käyttää niitä suorituskyvyn pullonkaulojen tunnistamiseen ja optimointien toteuttamiseen. Keskittymällä Web Vitals -mittareihin ja toteuttamalla edistyneitä tekniikoita, kuten RUM ja automaattinen suorituskykytestaus, voit tarjota nopeamman, sujuvamman ja nautinnollisemman käyttökokemuksen. Performance Timeline API:n omaksuminen ja suorituskykyanalyysin integrointi kehitystyönkulkuusi johtaa merkittäviin parannuksiin verkkosivustosi suorituskyvyssä ja käyttäjätyytyväisyydessä nykypäivän suorituskykyvetoisessa verkkoympäristössä.